<template>
  <view class="tarbar">
    <view
      class="tarbar-list"
      :style="{
        background: tabBar.backgroundColor,
        color: tabBar.color,
        'border-top':
          tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
        'border-bottom':
          tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0,
      }"
    >
      <view class="tarbar-list-ul">
        <view
          class="tarbar-list-li"
          v-for="(item, index) in tabBar.list"
          :key="index"
          @tap="setSelected(item, index)"
        >
          <block>
            <view class="tarbar-list-li-icon">
              <view class="border-raduis" v-if="index === 2 && flag && total"
                >{{ total }}
              </view>
              <image
                :src="selected== index ? item.selectedIconPath : item.iconPath"
                mode=""
              ></image>
            </view>
            <view
              :style="selected == index ? 'color:' + tabBar.selectedColor : ''"
              class="tarbar-list-li-name"
              >{{ item.text }}</view
            >
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { buying } from "@/api/product";
export default {
  data() {
    return {
      tabBar: {
        color: "#333333",
        selectedColor: "#326130",
        borderStyle: "#eee",
        backgroundColor: "#ffffff",
        position: "bottom",
        list: [
          {
            pagePath: "/pages/index/index",
            iconPath: "/static/tab-home.png",
            selectedIconPath: "/static/tab-home-rf.png",
            text: "首页",
          },
          {
            pagePath: "/pages/category/category",
            iconPath: "/static/tab-cate.png",
            selectedIconPath: "/static/tab-cate-rf.png",
            text: "分类",
          },
          {
            pagePath: "/pages/notify/notify",
            iconPath: "/static/tab-notify.png",
            selectedIconPath: "/static/tab-notify-rf.png",
            text: "求购",
          },
          {
            pagePath: "/pages/profile/profile",
            iconPath: "/static/tab-my.png",
            selectedIconPath: "/static/tab-my-rf.png",
            text: "我的",
          },
        ],
      },
      page: 1,
      selected: this.current, //当前激活项
      total: "",
    };
  },
  props: {
    current: {
      type: [Number, String],
      default: "",
    },
    flag: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    async getBuyingList(type) {
      await this.$http
        .get(`${buying}`, { page: this.page })
        .then(async (res) => {
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    setSelected(item, index) {
      if (this.selected == index) return;
      // this.selected = index
      this.$emit("change", item, index);
    },
  },
  watch: {
    current: {
      handler(val) {
        this.selected = val;
        const _this = this;
        this.getBuyingList();
        uni.setNavigationBarTitle({
          // 设置顶部bar的标题
          title: _this.tabBar.list[val].text,
        });
      },
      immediate: true,
    },
  },
};
</script>

<style>
.tarbar {
  width: 100%;
  z-index: 9999;
  position: fixed;
  bottom: 0;
}

.tarbar-list {
  width: 100%;
  height: 98upx;
  background: #4d586f;
  position: fixed;
  left: 0;
  bottom: 0;
}

.tarbar-list-ul {
  width: 100%;
  height: 100%;
  padding: 0upx 60upx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.tarbar-list-li {
  width: 80upx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tarbar-list-li-icon {
  width: 50upx;
  height: 50upx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.border-raduis {
  position: absolute;
  right: -5upx;
  top: -4upx;
  text-align: center;
  line-height: 24upx;
  z-index: 10;
  width: 24upx;
  height: 24upx;
  background: #f91c1c;
  border-radius: 50%;
  font-size: 20upx;
  color: #fff;
}
.tarbar-list-li-icon image {
  width: 40upx;
  height: 40upx;
}

.tarbar-list-li-name {
  width: 100%;
  text-align: center;
  line-height: 30upx;
  font-size: 24upx;
  height: 30upx;
}

.tarbar-list-li-center {
  width: 100upx;
}
</style>